<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>欢迎来到{{name}}学习</h1>
    <button @click="showInfo1">点我提示信息1 不传参数</button><br>
    <button @click="showInfo2(666,$event)">点我提示信息2 传参数</button>
</div>

<script type="text/javascript">
    // 关闭开发环境的警告提示
    Vue.config.productionTip = false
    // 创建vue的对象
    new Vue({
        el: '#root',
        data: {
            name: "庄小焱2"
        },
        methods: {
            showInfo1(event) {
                console.log(event.target.innerText)
                console.log(this) // 此处的this 就是vm
                alert("你好1，欢迎来学习前端知识")
            },
            showInfo2(number,a){
                console.log(number)
                console.log(a)
                alert("你好2，欢迎来学习前端知识")
            }
        }
    })
</script>
</body>
</html>